<template>
  <div class="Declaration-content">
    <div class="content-scroll">
      <div class="table-title">
        <div
          v-for="(item, index) in config"
          :key="index"
          :class="item.type == 'index' ? 'no' : 'name'"
          :style="`width: ${item.width}px`"
        >{{ item.label }}</div>
        <!-- <div class="name">服务单ID/名称</div> -->
        <!-- <div class="demand">需求一、二级分类</div> -->
      </div>
      <div class="table-content" v-for="(dataItem, i) in data" :key="i">
        <div
          v-for="(item, index) in config"
          :key="index"
          :class="item.type == 'index' ? 'no' : 'name'"
          :style="`width: ${item.width}px`"
        >
          <div class="cell">
            <template v-if="item.type == 'index'">{{ i + 1}}</template>
            <template v-else>{{ dataItem[item.prop] }}</template>
          </div>
        </div>
        <!-- <div class="name">
          <p class="text1">FW29191113</p>
          <p class="text2">名称标题内容</p>
        </div>
        <div class="demand">
          <p class="text1">一级分类标题</p>
          <p class="text2">二级分类标题</p>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Array,
      default: () => ([])
    },
    data: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>
<style lang="less" scoped>
.Declaration-content {
  margin: 10px 15px;
  padding: 11px;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  .content-scroll {
    overflow-y: scroll;
  }
  .table-title {
    height: 35px;
    line-height: 35px;
    background: #F3F7F7;
    font-size: 12px;
    /* white-space: nowrap; */
    display: flex;
    .no {
      width: 50px;
      /* display: flex; */
      text-align: center;
      flex-shrink: 0;
      background: #F3F7F7;
    }
    .name {
      width: 110px;
      text-align: center;
      /* display: flex; */
      flex-shrink: 0;
      background: #F3F7F7;
      border-right: 1px solid #D9D9D9;
      &:last-child {
        border-right: 0;
      }
    }
    .demand {
      padding-left: 15px;
      flex: 1;
    }
  }
  .table-content {
    display: flex;
    /* white-space: nowrap; */
    font-size: 12px;
    &:nth-child(2n-1) {
      // overflow: hidden;
      border-radius: 7px;
      .no {
        background: #F3F7F7;
      }
      .name {
        background: #F3F7F7;
      }
    }
    .no {
      flex-shrink: 0;
      display: flex;
      width: 50px;
      padding: 6px 0;
      justify-content: center;
      align-items: center;
    }
    .name {
      flex-shrink: 0;
      display: flex;
      width: 110px;
      justify-content: center;
      align-items: center;
      /* flex-direction: column; */
      padding: 7px 0;
      white-space: normal;
      border-right: 1px solid #D9D9D9;
      &:last-child {
        border-right: 0;
      }
      .text1 {
        color: #009966;
        margin: 2px 0;
      }
      .text2 {
        color: #011445;
        margin: 2px 0;
      }
    }
    .cell {
      padding: 0 8px;
    }
    .demand {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 17px 0 17px 0;
      .text1 {
        color: #011445;
        margin: 2px 0;
      }
      .text2 {
        position: relative;
        color: #011445;
        margin: 2px 0;
        padding-left: 10px;
        &:before {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          width: 8px;
          height: 8px;
          border-left: 1px solid #8F92A0;
          border-bottom: 1px solid #8F92A0;
        }
      }
    }
  }
}
</style>